<template>
  <div class="header">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播栏 -->
      <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img class="lunbo" v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 价格栏 -->
      <div class="clear">
        <div class="float_left">
          <van-cell>
            <template class="price">
              <span class="custom-title newprice"
                >￥{{ productmessage.newprice }}</span
              >
              <span class="custom-title oldprice"
                >￥{{ productmessage.oldprice }}</span
              >
              <van-tag type="danger">抽奖</van-tag>
            </template>
          </van-cell>
        </div>
        <div class="float_right">
          <p>已团{{ productmessage.packageNumber }}件</p>
        </div>
      </div>
      <!-- 标题介绍栏 -->

      <div>
        <p class="productTitle">{{ productmessage.title }}</p>
        <p class="productContent">{{ productmessage.content }}</p>
        <van-notice-bar
          left-icon="volume-o"
          :text="productmessage.regulation"
        />
      </div>
      <!-- 服务详情栏 -->
      <div>
        <van-row>
          <van-col span="7">
            <van-cell :title="productmessage.rule.one" icon="location-o" />
          </van-col>
          <van-col span="7">
            <van-cell :title="productmessage.rule.two" icon="location-o" />
          </van-col>
          <van-col span="7">
            <van-cell :title="productmessage.rule.three" icon="location-o" />
          </van-col>
          <van-col span="3">
            <van-icon name="arrow" size="18" class="rightArrow" />
          </van-col>
        </van-row>
      </div>
      <!-- 拼团栏 -->
      <div>
        <div class="productTitle groupNumBg">
          支付开团并邀请{{ productmessage.groupNum - 1 }}人参团，人数不足自动退款
        </div>
        <div class="productTitle groupBg">
          该商品抽奖尚未开始，请耐心等待
        </div>
      </div>
      <!-- 详情图片 -->
      <div>
        <van-image v-for="(image, index) in images" :key="index" :src="image" />
      </div>
      <!-- 底线栏 -->
      <div class="bottomline">
        <BottomLine></BottomLine>
      </div>
      <!-- 尾栏：购买栏 -->
      <div>
        <van-goods-action>
          <van-goods-action-icon icon="home-o" text="首页" />
          <van-goods-action-icon
            icon="star"
            text="已收藏"
            color="#ff5000"
            @click="collectionPopup"
          />
          <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
          <van-goods-action-button
            type="danger"
            text="即将开始"
            @click="ban"
            disabled
          />
        </van-goods-action>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
import BottomLine from "../../../xzf/home/BottomLine";

export default {
  name: "dhz",
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      cop: false,
      sp: false,
      forbid: false,
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
        "https://img.yzcdn.cn/vant/cat.jpeg",
      ],
      count: 0,
      isLoading: false,
      productmessage: {
        newprice: "1.00",
        oldprice: "99.00",
        packageNumber: 599,
        title:
          "【仅限深圳同城地区】新鲜水果上市 大荔冬枣  5斤/箱 枣香枣脆 等你抢购【商品名称】",
        content:
          "享有“南荔枝，北冬枣，百果王”的盛名。状如苹果，有“小苹果”之称。果皮赭红光亮、皮薄肉脆、甘甜清香、营养丰富，可食率达95%。",
        regulation:
          "抽奖规则：幸运抽奖，用户自主开团成团，成功组团可参与抽奖，中奖后等待商家发货。抽奖规则花少钱中大奖。",
        rule: {
          one: "正品保证",
          two: "坏果包赔",
          three: "退换无忧",
        },
        groupNum: 2,
      },
    };
  },
  components: {
    "BottomLine": BottomLine,
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    collectionPopup() {
      this.cop = true;
    },
    tg() {
      this.sp = true;
    },
    ban() {
      this.forbid = true;
    },
  },
};
</script>

<style scoped>
.clear::before,
.clear::after {
  content: "";
  display: table;
}
.clear::after {
  clear: both;
}
.lunbo {
  width: 370px;
  height: 260px;
  margin: 20px 0 20px 0;
}
.price {
  text-align: left;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.newprice {
  font-size: 18px;
  color: rgb(223, 63, 63);
}
.oldprice {
  font-size: 14px;
  text-decoration: line-through;
}
.float_left {
  float: left;
}
.float_right {
  float: right;
}
.float_right p {
  line-height: 45px;
  height: 45px;
  font-size: 14px;
  margin: auto;
}
.productTitle {
  font-size: 17px;
  text-align: left;
  padding: 15px;
}
.productContent {
  font-size: 14px;
  text-align: left;
  margin: 15px;
}
.rightArrow {
  line-height: 44px;
  height: 44px;
}
.groupNumBg {
  background-color: rgb(248, 248, 248);
}
.groupBg {
  background-color: rgb(235, 235, 235);
}
.bottomline {
  margin-bottom: 70px;
}
</style>